<template>
  <div ref="wrapper">
      <slot></slot>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  name: 'scroll',
  data() {
  	return {}
  },
  props: {
		probeType: { //滚动事件 何时派发滚动事件
			type: Number,
			default: 1
		},
		click: { //是否需要派发事件
			type: Boolean,
			default: true
		},
		listenScroll: {//是否监听滚动条位置 时时监听歌手列表滚动条位子
			type: Boolean,
			default: false
		},
		dataA: { //监听滚动条数据变化 防止滚不动 
			 type: Array, 
			 default:null
		},
		pullup: {//上拉刷新
			type: Boolean,
			default: false
		},
		beforeScroll: {//滚动时间 键盘收起
			type: Boolean,
			default: false
		},
		refreshDelay: {
			type: Number,
			default: 20
		}
	},
	mounted() {
		setTimeout(() => { //初始话滚动条的方法
			this._initScroll()
		}, 20)
	},
	methods: {
		_initScroll() {
			if (!this.$refs.wrapper) { //没有的值 就报错
				return
			}
			this.scroll = new BScroll(this.$refs.wrapper, {
				probeType: this.probeType,
				click: this.click
			})
			if (this.listenScroll) {//派发滚动条位子
				let me = this
				this.scroll.on('scroll', (pos) => {
					me.$emit('scroll', pos)
				})
			}
			if (this.pullup) { //是否开启上拉刷新
				this.scroll.on('scrollEnd', () => {
					if (this.scroll.y <= (this.scroll.maxScrollY + 50)) {
						this.$emit('scrollToEnd')
					}
				})
			}
			if (this.beforeScroll) { //失去焦点
				this.scroll.on('beforeScrollStart', () => {
					this.$emit('beforeScroll')
				})
			}
		},
		disable() { //禁用 better-scroll，DOM 事件（如 touchstart、touchmove、touchend）的回调函数不再响应
			this.scroll && this.scroll.disable()
		},
		enable() {//初始化 启用 better-scroll, 默认 开启。
			this.scroll && this.scroll.enable()
		},
		refresh() { //刷新方式
			this.scroll && this.scroll.refresh()
		},
		scrollTo() { //listviwe 字母表中用到
			this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments)
		},
		scrollToElement() {//滚到到相应位子
			this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments)
		}
	},
	watch: {
	 dataA() { //数据发生变化就重新调用刷新方法        
		 setTimeout(() => {
				this.refresh()
			}, this.refreshDelay)
		}
	}
  }

</script>

<style lang="scss" scoped >

</style>
